<template>
  <div class="h-full flex flex-col">
    <a-card>
      <div slot="title">
        <a-space>
          <div class="ty"></div>
          {{ $t("user.login.userName") }}
        </a-space>
        <!-- 操作按钮 -->
        <a-dropdown style="right: 0; position: absolute; margin-right: 25px">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="showModal('add')">
              {{ $t("user.login.login") }}
            </a-menu-item>
            <a-menu-item key="2" @click="start" :disabled="!hasSelected">
              {{ $t("user.password.strength.low222333") }}
            </a-menu-item>
          </a-menu>
          <a-button type="primary">
            <a-icon type="bars" />
            {{ $t("di.menus") }}
            <a-icon type="down" />
          </a-button>
        </a-dropdown>
      </div>
      <!-- 主列表 -->
      <a-table
        ref="table"
        size="middle"
        class="h-full overflow-x-auto"
        :dataSource="tableListData"
        :pagination="false"
        @change="tableChange"
        :loading="listLoading"
        :rowKey="(record) => record.Id"
        :scroll="{ x: 2000, y: 2000 }"
      >
        <a-table-column
          key="DataAssetsId"
          data-index="DataAssetsId"
          width="150px"
          :filters="columns[0].filters"
          @filterDropdownVisibleChange="
            (e) => {
              if (e) this.setValus(1);
            }
          "
        >
          <!--筛选+搜索功能-->
          <span
            slot="filterDropdown"
            slot-scope="{
              setSelectedKeys,
              selectedKeys,
              confirm,
              clearFilters,
              column,
            }"
          >
            <div
              style="padding-top: 4px; padding-left: 5px; padding-bottom: 3px"
            >
              <a-input
                :placeholder="$t('user.v130')"
                style="width: 189px; display: block"
                v-model="inputValue"
              />
              <div style="overflow-y: scroll; height: 200px">
                <a-checkbox-group
                  v-model="tableSearchInputValue"
                  style="margin-top: 5px; margin-bottom: 5px"
                  @change="tableSearchInputs"
                >
                  <div v-for="(item, i) in filterData" :key="i">
                    <a-checkbox :value="item.text">{{ item.text }}</a-checkbox>
                  </div>
                </a-checkbox-group>
              </div>
              <!--  执行搜索功能  -->
              <a-button
                type="primary"
                icon="search"
                size="small"
                style="width: 90px; margin-right: 8px"
                @click="tableSearch(1, confirm)"
              >
                {{ $t("menu.form.basic-form") }}
              </a-button>
              <a-button
                type="primary"
                icon="search"
                size="small"
                style="width: 90px; margin-right: 8px"
                @click="tableChange"
              >
                筛选
              </a-button>
              <!--  返回  -->
              <a-button
                size="small"
                style="width: 90px; margin-right: 5px"
                @click="ReaTable(confirm)"
                :visible="clicked1"
              >
                {{ $t("menu.form.step-form") }}
              </a-button>
            </div>
          </span>
          <span slot="title">{{ $t("user.register.register5566") }}</span>
        </a-table-column>

        <a-table-column
          key="AppDepartment"
          data-index="AppDepartment"
          width="150px"
          :filters="columns[1].filters"
          @filterDropdownVisibleChange="
            (e) => {
              if (e) this.setValus(2);
            }
          "
        >
          <template slot-scope="text, record">
            <span v-if="record.AppDepartment == ''" style="font-weight: 800"
              >N/A</span
            >
            <span v-else>{{ record.AppDepartment }}</span>
          </template>
          <span slot="title"
            >{{ $t("user.login.password.placeholder") }}
            <a-popover
              placement="bottom"
              trigger="click"
              :visible="clicked2"
              @visibleChange="handleClickChange2"
            >
              <template slot="content">
                <a-input
                  style="width: 188px; margin-bottom: 8px; display: block"
                  @change="onChange"
                  v-model="inputValue2"
                />
                <a-button
                  type="primary"
                  icon="search"
                  size="small"
                  style="width: 90px; margin-right: 8px"
                  @click="tableSearch(2)"
                >
                  {{ $t("menu.form.basic-form") }}
                </a-button>
                <a-button
                  size="small"
                  style="width: 90px"
                  @click="ReaTable"
                  :visible="clicked2"
                >
                  {{ $t("menu.form.step-form") }}
                </a-button>
              </template>
              <a-icon type="search" style="padding-left: 6px" /> </a-popover
          ></span>
        </a-table-column>
        <a-table-column
          key="BmwAppId"
          data-index="BmwAppId"
          width="200px"
          :filters="columns[2].filters"
          @filterDropdownVisibleChange="
            (e) => {
              if (e) this.setValus(3);
            }
          "
        >
          <template slot-scope="text, record">
            <span v-if="record.BmwAppId == ''" style="font-weight: 800"
              >N/A</span
            >
            <span v-else>{{ record.BmwAppId }}</span>
          </template>
          <span slot="title"
            >enterprise APP ID
            <a-popover
              placement="bottom"
              trigger="click"
              :visible="clicked3"
              @visibleChange="handleClickChange3"
            >
              <template slot="content">
                <a-input
                  style="width: 188px; margin-bottom: 8px; display: block"
                  @change="onChange"
                  v-model="inputValue3"
                />
                <a-button
                  type="primary"
                  icon="search"
                  size="small"
                  style="width: 90px; margin-right: 8px"
                  @click="tableSearch(3)"
                >
                  {{ $t("menu.form.basic-form") }}
                </a-button>
                <a-button
                  size="small"
                  style="width: 90px"
                  @click="ReaTable"
                  :visible="clicked3"
                >
                  {{ $t("menu.form.step-form") }}
                </a-button>
              </template>
              <a-icon type="search" style="padding-left: 10px" />
            </a-popover>
          </span>
        </a-table-column>
        <a-table-column
          key="BbaAppId"
          data-index="BbaAppId"
          width="200px"
          :filters="columns[3].filters"
          @filterDropdownVisibleChange="
            (e) => {
              if (e) this.setValus(4);
            }
          "
        >
          <template slot-scope="text, record">
            <span v-if="record.BbaAppId == ''" style="font-weight: 800"
              >N/A</span
            >
            <span v-else>{{ record.BbaAppId }}</span>
          </template>
          <span slot="title"
            >企业 APP ID
            <a-popover
              placement="bottom"
              trigger="click"
              :visible="clicked4"
              @visibleChange="handleClickChange4"
            >
              <template slot="content">
                <a-input
                  style="width: 188px; margin-bottom: 8px; display: block"
                  @change="onChange"
                  v-model="inputValue4"
                />
                <a-button
                  type="primary"
                  icon="search"
                  size="small"
                  style="width: 90px; margin-right: 8px"
                  @click="tableSearch(4)"
                >
                  {{ $t("menu.form.basic-form") }}
                </a-button>
                <a-button
                  size="small"
                  style="width: 90px"
                  @click="ReaTable"
                  :visible="clicked4"
                >
                  {{ $t("menu.form.step-form") }}
                </a-button>
              </template>
              <a-icon type="search" style="padding-left: 10px" />
            </a-popover>
          </span>
        </a-table-column>
        <!-- FeatherId -->
        <a-table-column
          key="FeatherId"
          data-index="FeatherId"
          width="200px"
          :filters="columns[4].filters"
          @filterDropdownVisibleChange="
            (e) => {
              if (e) this.setValus(5);
            }
          "
        >
          <template slot-scope="text, record">
            <span v-if="record.FeatherId == ''" style="font-weight: 800"
              >N/A</span
            >
            <span v-else>{{ record.FeatherId }}</span>
          </template>
          <span slot="title"
            >Feature ID
            <a-popover
              placement="bottom"
              trigger="click"
              :visible="clicked5"
              @visibleChange="handleClickChange5"
            >
              <template slot="content">
                <a-input
                  style="width: 188px; margin-bottom: 8px; display: block"
                  @change="onChange"
                  v-model="inputValue5"
                />
                <a-button
                  type="primary"
                  icon="search"
                  size="small"
                  style="width: 90px; margin-right: 8px"
                  @click="tableSearch(5)"
                >
                  {{ $t("menu.form.basic-form") }}
                </a-button>
                <a-button
                  size="small"
                  style="width: 90px"
                  @click="ReaTable"
                  :visible="clicked5"
                >
                  {{ $t("menu.form.step-form") }}
                </a-button>
              </template>
              <a-icon type="search" style="padding-left: 10px" />
            </a-popover>
          </span>
        </a-table-column>

        <a-table-column
          key="AppOwner"
          data-index="AppOwner"
          width="140px"
          :filters="columns[5].filters"
          @filterDropdownVisibleChange="
            (e) => {
              if (e) this.setValus(6);
            }
          "
        >
          <template slot-scope="text, record">
            <span v-if="record.AppOwner == ''" style="font-weight: 800"
              >N/A</span
            >
            <span v-else>{{ record.AppOwner }}</span>
          </template>
          <span slot="title">{{ $t("user.register.register") }} </span>
        </a-table-column>
        <a-table-column
          key="DataLibraryController"
          data-index="DataLibraryController"
          width="140px"
        >
          <template slot-scope="text, record">
            <span
              v-if="record.DataLibraryController == ''"
              style="font-weight: 800"
              >N/A</span
            >
            <span v-else>{{ record.DataLibraryController }}</span>
          </template>
          <span slot="title"
            >{{ $t("user.login.remember-me") }}
            <a-popover
              placement="bottom"
              trigger="click"
              :visible="clicked6"
              @visibleChange="handleClickChange6"
            >
              <template slot="content">
                <a-input
                  style="width: 188px; margin-bottom: 8px; display: block"
                  @change="onChange"
                  v-model="inputValue8"
                />
                <a-button
                  type="primary"
                  icon="search"
                  size="small"
                  style="width: 90px; margin-right: 8px"
                  @click="tableSearch(6)"
                >
                  {{ $t("menu.form.basic-form") }}
                </a-button>
                <a-button
                  size="small"
                  style="width: 90px"
                  @click="ReaTable"
                  :visible="clicked6"
                >
                  {{ $t("menu.form.step-form") }}
                </a-button>
              </template>
              <a-icon type="search" style="padding-left: 10px" /> </a-popover
          ></span>
        </a-table-column>
        <a-table-column
          key="DataLibraryEnvironment"
          data-index="DataLibraryEnvironment"
          width="100px"
          :filters="columns[7].filters"
          @filterDropdownVisibleChange="
            (e) => {
              if (e) this.setValus(8);
            }
          "
        >
          <span slot="title">{{ $t("user.login.tab-login-credentials") }}</span>
        </a-table-column>
        <!-- 数据详情 -->
        <a-table-column
          key="details"
          :title="$t('user.register.email.placeholder')"
          width="140px"
        >
          <template slot-scope="row">
            <span style="color: #7188ff; cursor: pointer" @click="showEye(row)">
              <span v-if="row.details.length > 0">{{
                row.details[0].DataItem
              }}</span>
              <a-icon type="eye" />
            </span>
          </template>
        </a-table-column>
        <!-- RPA ID --------------->
        <a-table-column key="RpaId" data-index="RpaId" width="140px">
          <span slot="title"
            >RPA ID
            <a-popover
              placement="bottom"
              trigger="click"
              :visible="clicked7"
              @visibleChange="handleClickChange7"
            >
              <template slot="content">
                <a-input
                  style="width: 188px; margin-bottom: 8px; display: block"
                  @change="onChange"
                  v-model="inputValue6"
                />
                <a-button
                  type="primary"
                  icon="search"
                  size="small"
                  style="width: 90px; margin-right: 8px"
                  @click="tableSearch(7)"
                >
                  {{ $t("menu.form.basic-form") }}
                </a-button>
                <a-button
                  size="small"
                  style="width: 90px"
                  @click="ReaTable"
                  :visible="clicked7"
                >
                  {{ $t("menu.form.step-form") }}
                </a-button>
              </template>
              <a-icon type="search" style="padding-left: 10px" />
            </a-popover>
          </span>
        </a-table-column>
        <!-- 状态 -------------------------->
        <a-table-column
          key="DataLibraryState"
          :data-index="itLang ? '1' : '2'"
          :title="$t('user.login.message-invalid-verification-code0011')"
          :filters="columns[10].filters"
          width="90px"
          @filterDropdownVisibleChange="
            (e) => {
              if (e) this.setValus(11);
            }
          "
        >
          <template slot-scope="text, record">
            <span>
              <div v-if="record.DataLibraryState == 0">
                <a-badge color="red" />Offline
              </div>
              <div v-if="record.DataLibraryState == 1">
                <a-badge color="blue" />Draft
              </div>
              <div v-if="record.DataLibraryState == 2">
                <a-badge status="success" />Active
              </div>
            </span>
          </template>
        </a-table-column>
        <!-- 操作 -->
        <a-table-column
          key="action"
          :title="$t('menu.exception.not-find')"
          width="150px"
          fixed="right"
        >
          <template slot-scope="row">
            <span>
              <a-dropdown>
                <a-button type="link">
                  <a-icon type="more" />
                </a-button>
                <template #overlay>
                  <a-menu>
                    <!-- 详情 -->
                    <a-menu-item>
                      <a-button
                        type="link"
                        @click="showModal('detail', row.Id)"
                        >{{
                          $t("user.register.password.popover-message")
                        }}</a-button
                      >
                    </a-menu-item>
                    <!-- 编辑 -->
                    <a-menu-item>
                      <a-button
                        type="link"
                        @click="showModal('edit', row.Id)"
                        >{{ $t("menu.exception.server-error") }}</a-button
                      >
                    </a-menu-item>
                    <!-- 删除 -->
                    <a-menu-item>
                      <a-popconfirm
                        :title="
                          $t('user.verification-code.required111566110577225')
                        "
                        :ok-text="$t('user.verification-code.required1166')"
                        :cancel-text="$t('user.email.required11')"
                        @confirm="del(row.Id)"
                      >
                        <a-button type="link" block>{{
                          $t("menu.exception.trigger")
                        }}</a-button>
                      </a-popconfirm>
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </span>
          </template>
        </a-table-column>
      </a-table>

      <!-- 分页 -->
      <a-pagination
        size="small"
        v-model="pagination.page"
        :total="pagination.total"
        hideOnSinglePage
        :pageSize.sync="pagination.pageSize"
        @change="getList"
      />

      <!-- 大抽屉 -->
      <a-drawer
        :title="modalTitle"
        placement="right"
        :closable="false"
        :visible="modalVisible"
        :width="1200"
        :rowKey="(record) => record.Id"
        @close="closeDrawer"
      >
        <a-form
          :form="form"
          ref="form"
          layout="inline"
          class="drawer-form"
          label-align="left"
        >
          <!-- APP名称 -->
          <a-form-item
            :label="$t('user.verification-code.required1115661105772124555')"
          >
            <a-select
              :placeholder="
                $t('user.verification-code.required111566110577212')
              "
              @change="handleChangeAppid"
              show-search
              option-filter-prop="children"
              v-decorator="[
                'DataLibraryAppidId',
                {
                  rules: [
                    {
                      required: true,
                      message: $t(
                        'user.verification-code.required111566110577280'
                      ),
                    },
                  ],
                },
              ]"
              style="width: 260px"
              :disabled="see"
            >
              <a-select-option
                v-for="item in appidLists"
                :value="item.value"
                :key="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <br />

          <!-- APP负责人 -->
          <a-form-item
            :label="$t('user.login.mobile.verification-code.placeholder')"
          >
            <a-input
              v-decorator="['AppOwner']"
              :placeholder="
                $t('user.login.mobile.verification-code.placeholder11')
              "
              disabled
            />
          </a-form-item>
          <a-form-item :label="$t('user.login.password.placeholder')">
            <a-input
              v-decorator="['AppDepartment']"
              :placeholder="$t('user.login.message-invalid-credentials')"
              disabled
            />
          </a-form-item>
          <a-form-item label="enterprise APP ID">
            <a-input
              v-decorator="['BmwAppId']"
              placeholder="enterprise APP ID"
              disabled
            />
          </a-form-item>
          <a-form-item label="企业 APP ID">
            <a-input
              v-decorator="['BbaAppId']"
              placeholder="企业 APP ID"
              disabled
            />
          </a-form-item>
          <a-form-item label="Feature ID">
            <a-input
              v-decorator="['FeatherId']"
              placeholder="Feature ID"
              disabled
            />
          </a-form-item>
          <div
            v-show="
              modalTitle != $t('user.verification-code.required1115667766')
            "
          >
            <a-form-item
              :label="$t('user.verification-code.required111566110577141')"
            >
              <a-input
                v-decorator="['DataLibraryUser']"
                disabled
                style="margin-left: 20px"
              />
            </a-form-item>
            <a-form-item
              :label="$t('user.verification-code.required111566110577142')"
              style="margin-left: 10px"
            >
              <a-input
                v-decorator="['DataLibraryCreateTime']"
                disabled
                style="margin-left: 20px"
              />
            </a-form-item>
            <a-form-item
              :label="$t('user.verification-code.required111566110577143')"
              style="margin-left: 10px"
            >
              <a-input
                v-decorator="['DataLibraryUpdateTime']"
                disabled
                style="margin-left: 20px"
              />
            </a-form-item>
          </div>
          <br />
          <!-- 数据控制者 -->
          <a-form-item :label="$t('user.login.remember-me')">
            <a-select
              mode="multiple"
              @change="changeselect"
              :value="selectedItems"
              option-filter-prop="children"
              v-decorator="[
                'DataLibraryController',
                {
                  rules: [
                    {
                      required: true,
                      message: $t('user.login.forgot-password'),
                    },
                  ],
                },
              ]"
              :placeholder="$t('user.login.forgot-password')"
              style="width: 180px; margin-left: 20px"
              :disabled="see"
            >
              <a-select-option
                v-for="item in systemControllerSourceData"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="Other" v-if="otherflag">
            <a-input
              v-decorator="[
                'DataLibraryControllerOther',
                {
                  rules: [
                    {
                      required: true,
                      message: $t(
                        'user.verification-code.required111566110577336'
                      ),
                    },
                  ],
                },
              ]"
              :disabled="see"
            />
          </a-form-item>
          <br />
          <!-- 线上/线下 -->
          <a-form-item :label="$t('user.login.tab-login-credentials')">
            <a-select
              v-decorator="[
                'DataLibraryEnvironment',
                {
                  rules: [
                    {
                      required: true,
                      message: $t(
                        'user.verification-code.required111566110577336'
                      ),
                    },
                  ],
                },
              ]"
              show-search
              option-filter-prop="children"
              :filter-option="filterOption"
              :placeholder="$t('user.login.tab-login-mobile')"
              style="width: 178px"
              :disabled="see"
            >
              <a-select-option
                v-for="item in Xians"
                :value="item.value"
                :key="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="ID" v-show="false" class="hidden">
            <a-input v-decorator="['Id']" disabled />
          </a-form-item>
          <br />
          <!-- 数据详情 -->
          <a-form-item style="margin-right: 0; margin-left: 15px">
            <div style="position: relative">
              {{ $t("user.register.email.placeholder") }}
              <div
                style="
                  color: red;
                  margin-top: -10px;
                  display: inline-block;
                  position: absolute;
                  top: 9px;
                  left: -10px;
                  z-index: 99;
                "
              >
                *
              </div>
            </div>
            <template>
              <a-table
                size="middle"
                :data-source="dataDetailInfoTables"
                :pagination="{ pageSize: 10 }"
                :scroll="{ y: 1000 }"
                :rowKey="(record) => record.key"
              >
                <a-table-column
                  key="DataItem"
                  data-index="DataItem"
                  width="150"
                >
                  <span slot="title">{{
                    $t("app.setting.themecolor.dust")
                  }}</span>
                  <template slot-scope="text, record">
                    <a> {{ record.DataItemStr }} </a>
                    <a-popconfirm
                      :title="
                        $t('user.verification-code.required111566110577225')
                      "
                      :ok-text="$t('user.verification-code.required1166')"
                      :cancel-text="$t('user.email.required11')"
                      @confirm="deletes(record)"
                      v-if="!see"
                    >
                      <a-button type="link">{{
                        $t("menu.exception.trigger")
                      }}</a-button>
                    </a-popconfirm>
                  </template>
                </a-table-column>

                <a-table-column
                  key="DataLevelStr"
                  data-index="DataLevelStr"
                  width="150"
                >
                  <span slot="title">{{
                    $t("app.setting.themecolor.sunset")
                  }}</span>
                </a-table-column>

                <a-table-column
                  key="DataSensitiveStr"
                  data-index="DataSensitiveStr"
                  width="150"
                >
                  <span slot="title"
                    >ggggggggg{{ $t("app.setting.themecolor.green") }}</span
                  >
                </a-table-column>
                <a-table-column
                  key="DataCity"
                  data-index="DataCity"
                  width="150"
                  :allowClear="false"
                  :noFoundContent="noFoundContentText"
                >
                  <span slot="title">{{
                    $t("user.register.get-verification-code")
                  }}</span>
                  <template slot-scope="text, record">
                    <a-select
                      mode="multiple"
                      v-model="record.DataCity"
                      option-filter-prop="children"
                      :placeholder="
                        $t('user.verification-code.required111566110577338')
                      "
                      style="width: 128px"
                      :disabled="see"
                    >
                      <a-select-option
                        v-for="item in sonfigurationItemsContent"
                        :value="item.value"
                        :key="item.value"
                      >
                        {{ item.label }}
                      </a-select-option>
                    </a-select>
                  </template>
                </a-table-column>
                <!-- 数据存储地点 -->
                <a-table-column
                  key="DataDeposit"
                  data-index="DataDeposit"
                  width="150"
                >
                  <span slot="title">{{ $t("user.register.sign-in") }}</span>
                  <template slot-scope="text, record">
                    <a-select
                      mode="multiple"
                      v-model="record.DataDeposit"
                      option-filter-prop="children"
                      :placeholder="
                        $t('user.verification-code.required111566110577339')
                      "
                      style="width: 128px"
                      :disabled="see"
                    >
                      <a-select-option
                        v-for="item in fonfigurationItemsContent"
                        :value="item.value"
                        :key="item.value"
                      >
                        {{ item.label }}
                      </a-select-option>
                    </a-select>
                  </template>
                </a-table-column>
                <a-table-column
                  key="DataSource"
                  data-index="DataSource"
                  width="150"
                >
                  <span slot="title">{{ $t("user.register-result.msg") }}</span>
                  <template slot-scope="text, record">
                    <a-select
                      mode="multiple"
                      v-model="record.DataSource"
                      option-filter-prop="children"
                      :placeholder="
                        $t('user.verification-code.required111566110577340')
                      "
                      style="width: 128px"
                      :disabled="see"
                    >
                      <a-select-option
                        v-for="item in appidLists"
                        :value="item.value"
                        :key="item.value"
                      >
                        {{ item.label }}
                      </a-select-option>
                    </a-select>
                  </template>
                </a-table-column>
                <a-table-column
                  key="DataDestination"
                  data-index="DataDestination"
                  width="150"
                >
                  <span slot="title">{{
                    $t("user.register-result.activation-email")
                  }}</span>
                  <template slot-scope="text, record">
                    <a-select
                      mode="multiple"
                      v-model="record.DataDestination"
                      option-filter-prop="children"
                      :placeholder="
                        $t('user.verification-code.required111566110577341')
                      "
                      style="width: 128px"
                      :disabled="see"
                    >
                      <a-select-option
                        v-for="item in appidLists"
                        :value="item.value"
                        :key="item.value"
                      >
                        {{ item.label }}
                      </a-select-option>
                    </a-select>
                  </template>
                </a-table-column>
                <!-- 身份信息下的删除 -->
                <span slot="DataItem" slot-scope="text, record">
                  <a> {{ record.DataItemStr }} </a>
                  <a-popconfirm
                    :title="
                      $t('user.verification-code.required111566110577225')
                    "
                    :ok-text="$t('user.verification-code.required1166')"
                    :cancel-text="$t('user.email.required11')"
                    @confirm="deletes(record)"
                  >
                    <a-button type="link">{{
                      $t("menu.exception.trigger")
                    }}</a-button>
                  </a-popconfirm>
                </span>
                <span slot="cityAction" slot-scope="text, record">
                  <a-select
                    mode="multiple"
                    v-model="record.DataCity"
                    :placeholder="$t('user.register.get-verification-code')"
                    style="width: 128px"
                    v-decorator="[
                      {
                        rules: [
                          {
                            required: true,
                            message: 'Please input your note!',
                          },
                        ],
                      },
                    ]"
                  >
                    <a-select-option
                      v-for="items in sonfigurationItemsContent"
                      :value="items.value"
                      :key="items.value"
                      >{{ items.label }}</a-select-option
                    >
                  </a-select>
                </span>
                <span slot="depositAction" slot-scope="text, record">
                  <a-select
                    v-model="record.DataDeposit"
                    :placeholder="$t('user.register.sign-in')"
                    style="width: 128px"
                  >
                    <a-select-option
                      v-for="item in fonfigurationItemsContent"
                      :value="item.value"
                      :key="item.value"
                    >
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </span>
                <span slot="sourceAction" slot-scope="text, record">
                  <a-select
                    v-model="record.DataSource"
                    :placeholder="$t('user.register-result.msg')"
                    style="width: 128px"
                  >
                    <a-select-option
                      v-for="item in appidLists"
                      :value="item.value"
                      :key="item.value"
                    >
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </span>
                <span slot="destinationAction" slot-scope="text, record">
                  <a-select
                    v-model="record.DataDestination"
                    :placeholder="$t('user.register-result.activation-email')"
                    style="width: 128px"
                  >
                    <a-select-option
                      v-for="item in appidLists"
                      :value="item.value"
                      :key="item.value"
                    >
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </span>
              </a-table>
              <!-- 发现导入 -->
              <a-button
                type="link"
                icon="vertical-align-bottom"
                @click="openModal"
                v-if="!see"
                >{{ $t("user.register-result.msg6868") }}
              </a-button>
            </template>
          </a-form-item>
        </a-form>
        <div
          :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'center',
            zIndex: 1,
          }"
        >
          <!-- 提交 -->
          <a-button
            type="primary"
            @click="submitCreate()"
            style="margin-right: 20px"
            v-if="!see"
            >{{ $t("user.register-result.back-home") }}
          </a-button>
          <a-button @click="submitSave()" style="margin-right: 20px" v-if="!see"
            >{{ $t("user.register-result.view-mailbox") }}
          </a-button>
          <a-button style="margin-right: 8px" @click="closeDrawer">{{
            $t("user.email.required11")
          }}</a-button>
        </div>
      </a-drawer>

      <!-- 导入步骤条 -->

      <a-modal
        :visible="visible"
        @ok="handleOk"
        @cancel="handleCancel"
        width="600px"
      >
        <div style="margin-top: 20px">
          <a-steps :current="current">
            <a-step
              v-for="item in steps"
              :key="item.title"
              :title="$t(item.title)"
            />
          </a-steps>
          <div class="steps-content" style="margin-top: 20px">
            <a-form
              layout="inline"
              v-show="steps[current].content == 'firstStep'"
              style="padding-bottom: 100px"
              :form="diForm"
            >
              <!-- 第一步 -->
              <a-form-item class="appids" label="APPID">
                <a-row>
                  <a-col :span="24">
                    <a-select
                      :placeholder="$t('user.login.mobile.placeholder5656')"
                      @change="handleChangeDiAppid"
                      v-decorator="[
                        'DiscoverAppId',
                        {
                          rules: [
                            {
                              required: true,
                              message: $t('user.login.mobile.placeholder5656'),
                            },
                          ],
                        },
                      ]"
                      style="width: 270px"
                    >
                      <a-select-option
                        v-for="item in appidLists"
                        :value="item.label"
                        :key="item.value"
                      >
                        {{ item.label }}
                      </a-select-option>
                    </a-select>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                class="appids"
                :label="$t('user.verification-code.required11156633')"
              >
                <a-row>
                  <a-col :span="24" v-if="treeData.length > 0">
                    <!-- 选中后查询 -->
                    <a-tree
                      defaultExpandAll
                      v-model:checkedKeys="checkedKeys"
                      checkable
                      :tree-data="treeData"
                    >
                      <template #title="{ title, key }">
                        <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{
                          title
                        }}</span>
                        <template v-else>{{ title }}</template>
                      </template>
                    </a-tree>
                  </a-col>
                  <a-col :span="24" v-else>{{
                    $t("user.verification-code.required11156677")
                  }}</a-col>
                </a-row>
              </a-form-item>
            </a-form>
            <!-- 第二步 -->
            <a-row v-show="steps[current].content == 'secondStip'">
              <a-col :span="24">
                <!-- 选中的分类表 -->
                <a-table
                  ref="table"
                  size="middle"
                  class="h-full"
                  style="right: 0"
                  :dataSource="dccDiData"
                  :pagination="true"
                  :loading="listLoading"
                  :rowKey="(record) => record.Id"
                >
                  <a-table-column key="Items" data-index="Items" width="150">
                    <span slot="title">{{
                      $t("app.setting.themecolor.dust")
                    }}</span>
                    <!-- <template  slot-scope="text, record">
                      <span>{{ jzh }}</span>
                    </template> -->
                  </a-table-column>
                  <a-table-column
                    key="Classification"
                    data-index="Classification"
                    width="150"
                  >
                    <span slot="title">{{
                      $t("user.verification-code.required11156644")
                    }}</span>
                    <template slot-scope="text, record">
                      <a-select
                        v-model="record.Classification"
                        :placeholder="
                          $t('user.verification-code.required11156666')
                        "
                        style="width: 198px"
                      >
                        <a-select-option
                          v-for="(item, index) in dccSelectData"
                          :value="item.value"
                          :key="item.value"
                        >
                          {{ item.label }}
                        </a-select-option>
                      </a-select>
                    </template>
                  </a-table-column>
                  <a-table-column key="Result" data-index="Result" width="150">
                    <span slot="title">{{
                      $t("user.verification-code.required11156655")
                    }}</span>
                    <template slot-scope="text, record">
                      <div v-if="record.Result == '未匹配'" style="color: red">
                        {{ record.Result }}
                      </div>
                      <div v-else>
                        {{ record.Result }}
                      </div>
                    </template>
                  </a-table-column>
                </a-table>
                <a-button type="primary" @click="mate()">{{
                  $t("user.phone-number.required")
                }}</a-button>
              </a-col>
            </a-row>
          </div>
          <div class="steps-action"></div>
        </div>

        <template slot="footer">
          <!-- <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
          Submit
        </a-button> -->
          <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
            {{ $t("user.verification-code.required11156611") }}
          </a-button>
          <a-button
            v-if="current < steps.length - 1"
            type="primary"
            @click="next"
          >
            {{ $t("user.verification-code.required11156622") }}
          </a-button>
          <a-button
            v-if="current == steps.length - 1"
            type="primary"
            @click="handleOk"
          >
            {{ $t("user.verification-code.required1166") }}
          </a-button>
          <!-- 取消 -->
          <a-button key="back" @click="handleCancel">
            {{ $t("user.email.required11") }}</a-button
          >
        </template>
      </a-modal>

      <!-- 查看匹配数据 -->
      <a-modal
        :title="detailTitle"
        :visible="eyeDrawer"
        width="750px"
        @cancel="closeEyeDrawer"
      >
        <a-table
          style="width: 700px"
          :data-source="eyeDrawerList"
          bordered
          :rowKey="(record) => record.Id"
        >
          <a-table-column key="DataItem" data-index="DataItem" width="150">
            <span slot="title">{{ $t("app.setting.themecolor.dust") }}</span>
          </a-table-column>
          <a-table-column
            key="DataSensitive"
            data-index="DataSensitive"
            width="150"
          >
            <span slot="title">{{ $t("app.setting.themecolor.green") }}</span>
          </a-table-column>
          <a-table-column key="DataLevel" data-index="DataLevel" width="150">
            <span slot="title">{{ $t("app.setting.themecolor.sunset") }}</span>
          </a-table-column>
          <a-table-column
            key="ProtectionStr"
            data-index="ProtectionStr"
            width="150"
          >
            <span slot="title">{{ $t("user.register-result.msg3344") }}</span>
          </a-table-column>
        </a-table>
        <!-- 按钮配置 -->
        <template slot="footer">
          <a-button type="primary" @click="closeEyeDrawer">
            {{ $t("app.setting.themecolor.ff99999999") }}
          </a-button>
        </template>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
import storage from "store";

const data = [];
import {
  columns,
  columns1,
  dataDetailRead,
  dccDiDataColumns,
} from "@/views/inventoryDI/datas/simple";
import { VolumeData } from "@/utils/util";
import { dataLibraryLists } from "@/api/ytdg";
import { Icon, Table, TreeSelect } from "ant-design-vue";
import {
  appIdCreatexl,
  appIdDetail,
  appidSxq,
  dIdDetailGroup,
} from "@/api/appid";
import { dataLibraryChange, dataLibraryCreate } from "@/api/di/json";
import { configurationSelect } from "@/api/configs";
import {
  dataDelete,
  dataLibraryDelete,
  dataLibraryDetail,
  dccSelect,
  discoverFinds,
  discoverTree,
} from "@/api/di/form";
import { childataItems } from "@/api/dcc";
import { userQuery } from "@/api/common/form";
import axios from "axios";
import moment from "moment";
import { ACCESS_TOKEN } from "@/store/mutation-types";

const SHOW_ALL = TreeSelect.SHOW_ALL;
const SHOW = Table.SHOW;
const SHOW_P = Icon.SHOW_P;

export default {
  components: {
    AppIdSelect: () => import("@/components/ytdg/appidSelect.vue"),
  },
  data() {
    return {
      tableSearchInputValue: [],
      // 列表选择
      filterData: [],
      rules: {
        no: [{ required: true, message: "请输入账号", trigger: "blur" }],
      },
      treeLists: [],
      // 表单数据
      form: this.$form.createForm(this),
      diForm: this.$form.createForm(this),
      // 数据详情的标题内容
      detailTitle: "",
      list: [],
      selectedItems: [],
      // 用户列表
      userList: [],
      listLoading: false,
      selectedRowKeys: [],
      data,
      clicked1: false,
      clicked2: false,
      clicked3: false,
      clicked4: false,
      clicked5: false,
      clicked6: false,
      clicked7: false,
      columns,
      Xians: [
        {
          label: "线上",
          value: 1,
        },
        {
          label: "线下",
          value: 2,
        },
      ],
      columns1,
      noFoundContentText: "请选择城市",
      modalVisible: false,
      modalTitle: "",
      visible: false,
      delid: "",
      current: 0,
      steps: [
        {
          title: "menu.account.logout112299227788",
          content: "firstStep",
        },
        {
          title: "menu.account.logout112299227799",
          content: "secondStip",
        },
      ],
      eyeDrawer: false,
      value: ["0-0-0"],
      SHOW_ALL,
      SHOW,
      SHOW_P,
      total: 0,
      hasSelected: true,
      //ohter是否出现
      otherflag: false,
      //table搜索的input里面的值
      // inputData:'',
      inputValue: "",
      inputValue2: "",
      inputValue3: "",
      inputValue4: "",
      inputValue5: "",
      inputValue6: "",
      inputValue7: "",
      inputValue8: "",
      queryForm: {
        name: undefined,
        appid: undefined,
        assetsId: undefined,
        department: undefined,
        owner: undefined,
        controller: undefined,
        entities: undefined,
        environment: undefined,
        state: undefined,
        rpaid: undefined,
      },
      tableListData: [],
      eyeDrawerList: [], // 眼睛弹窗列表
      // 新增
      appInfo: {},
      customLocale: {
        emptyText: this.$t("user.verification-code.required111566110577183"),
      },
      appInfo1: {},
      appInfo2: {},
      loading: false,
      addForm: {
        data_library_appid_id: undefined,
        data_library_controller: undefined,
        data_library_environment: undefined,
        details: [
          {
            data_item: undefined,
            data_city: undefined,
            data_deposit: undefined,
            data_source: undefined,
            data_destination: undefined,
            index: 0,
          },
        ],
        data_library_entities: undefined,
      },
      detailsIndex: 0,

      // 固定下拉的初始化
      appidLists: [],
      systemControllerSourceData: [],
      sonfigurationItemsContent: [],
      fonfigurationItemsContent: [],
      dataSubjectData: VolumeData,

      // 数据详情
      dataDetailInfoTables: [],

      // 分页数据
      pagination: {
        page: 1, //当前页
        pageSize: 10, //每页条数
        total: 0, //总条数
        showQuickJumper: true,
        hideOnSinglePage: true,
      },
      // 数据详情查看
      dataDetailRead,
      // 导入DI的最终结果数据集
      importDiResult: [],
      // 导入DI的时候选中的值
      checkedKeys: [],
      // 导入DI时的树状数据
      treeData: [],
      // 获取分类分级
      dccSelectData: [],
      // 导入数据的分级分类内容
      dccDiDataColumns,
      dccDiData: [],
      see: false,
    };
  },
  mounted() {
    console.log(this.$refs.myPermissions); // 访问组件实例
    this.pluginsBuild();
    let that = this;
    window.addEventListener("setItemEvent", function (e) {
      if (e.key == "lang") {
        let lang = JSON.parse(e.value);
        if (lang == "zh-EN") {
          that.itLang = false;
        } else if (lang == "zh-CN") {
          that.itLang = true;
        }
      }
    });
  },
  created() {
    this.init();
  },
  methods: {
    tableSearchInputs() {
      this.inputValue = this.tableSearchInputValue.join(",");
    },
    //数据控制者是否出现other获取
    changeselect(value) {
      this.selectedItems = value;
      let item2 = [];
      value.forEach((item) => {
        this.systemControllerSourceData.forEach((item1, index) => {
          if (item == item1.value) {
            item2.push(item1.label);
          }
        });
      });
      if (item2.includes("Other")) {
        this.otherflag = true;
      } else {
        this.otherflag = false;
      }
    },
    handleClickChange1(visible) {
      this.clicked1 = visible;
      this.setValus(1);
    },
    handleClickChange2(visible) {
      this.clicked2 = visible;
    },
    handleClickChange3(visible) {
      this.clicked3 = visible;
    },
    handleClickChange4(visible) {
      this.clicked4 = visible;
    },
    handleClickChange5(visible) {
      this.clicked5 = visible;
    },
    handleClickChange6(visible) {
      this.clicked6 = visible;
    },
    handleClickChange7(visible) {
      this.clicked7 = visible;
    },
    //导出表格
    async start() {
      let id = this.selectedRowKeys.join(",");
      try {
        const data = await axios({
          url: `${process.env.VUE_APP_BASE_API}/v1/dataLibrary/export`,
          method: "post",
          params: { id: id },
          responseType: "arraybuffer",
          headers: {
            token: storage.get(ACCESS_TOKEN),
            tokens: storage.get("bmwToken") || "",
          },
        });

        if (data.status == 200) {
          const url = window.URL.createObjectURL(
            new Blob([data.data], {
              type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
            })
          );
          const link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", `平台数据${moment().format("L")}.xls`);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        } else {
          this.$message.error(
            this.$t("user.verification-code.required111566110577327")
          );
        }
      } catch (error) {
        console.log(error);
        this.$message.error(error);
      }
    },
    async handleOk(e) {
      // 清空旧的数据
      this.treeData = [];
      this.dccDiData = [];
      this.current = 0;
      // this.dataDetailInfoTables = []
      try {
        // 循环处理新的数据
        for (var i = 0; i < this.importDiResult.length; i++) {
          const { data } = await childataItems({
            id: this.importDiResult[i].Rid,
          });
          this.dataDetailInfoTables.push({
            key: this.importDiResult[i].No,
            DataItemStr: this.importDiResult[i].Result,
            DataItem: this.importDiResult[i].Rid,
            DataLevelStr: data[0].DateLevel,
            DataLevel: data[0].SourceDataLevel, // 数据级别
            DataSensitiveStr: data[0].SensitivityLevel, // 数据敏感度
            DataSensitive: data[0].SourceSensitivityLevel,
          });
        }
      } catch (error) {
        this.$message.error(error);
      }
      this.importDiResult = [];
      this.visible = false;
    },
    //删除
    async del(id) {
      this.listLoading = true;
      try {
        await dataDelete({ id: id });
        this.$message.success(
          this.$t("user.verification-code.required111566110577133")
        );
        this.getList();
      } catch (error) {
        // 报错信息
        this.$message.error(error);
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false;
      }
    },
    //table搜索input
    onChange(e) {
      this.inputData = e.data;
      console.log("inputValue", this.inputValue);
      console.log("inp", this.inputValue2);
      console.log("3", this.inputValue3);
      console.log("4", this.inputValue4);
      console.log("5", this.inputValue5);
      console.log("6", this.inputValue6);
      // console.log(value);
    },
    //table搜索1
    async tableSearch(type, confirm) {
      if (type === 1) {
        this.queryForm = {
          assetsIds: this.inputValue,
        };
      } else if (type === 2) {
        this.queryForm = {
          departments: this.inputValue2,
        };
      } else if (type === 3) {
        this.queryForm = {
          bmwAppIds: this.inputValue3,
        };
      } else if (type === 4) {
        this.queryForm = {
          bbaAppIds: this.inputValue4,
        };
      } else if (type === 5) {
        this.queryForm = {
          featherIds: this.inputValue5,
        };
      } else if (type === 6) {
        this.queryForm = {
          DataLibraryController: this.inputValue8,
        };
      } else if (type === 7) {
        this.queryForm = {
          RpaId: this.inputValue6,
        };
      }
      this.listLoading = true;
      const { page, pageSize } = this.pagination;
      try {
        // 调用查询列表
        const { data } = await dataLibraryLists({
          ...{ page: 1, pageSize: 10 },
          ...this.queryForm,
        });
        // 解构赋值
        const { Page, PageSize, Total, Lists } = data;
        // 给table赋值
        this.tableListData = Lists || [];

        // 给分页数据赋值
        this.pagination = {
          page: Page,
          pageSize: PageSize,
          total: Total,
        };
      } catch (error) {
        // 报错信息
        this.$message.error(error);
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false;
      }
      this.clicked1 = false;
      this.clicked2 = false;
      this.inputValue = "";
      this.inputValue2 = "";
      this.clicked3 = false;
      this.inputValue3 = "";
      this.clicked4 = false;
      this.inputValue4 = "";
      this.clicked5 = false;
      this.inputValue5 = "";
      this.clicked6 = false;
      this.inputValue8 = "";
      this.clicked7 = false;
      this.inputValue6 = "";
      // 让搜索关闭
      confirm();
    },
    //table1搜索重置
    async ReaTable() {
      this.pagination.page = 1;
      this.queryForm = {};
      await this.getList();
      this.clicked1 = false;
      this.inputValue = "";
      this.clicked2 = false;
      this.inputValue2 = "";
      this.clicked6 = false;
      this.inputValue8 = "";
      this.clicked3 = false;
      this.inputValue3 = "";
      this.clicked4 = false;
      this.inputValue4 = "";
      this.clicked7 = false;
      this.inputValue6 = "";
      this.clicked5 = false;
      this.inputValue5 = "";
    },
    // 查询Filter逻辑
    async setValus(typeId) {
      this.listLoading = true;
      try {
        const { data } = await dIdDetailGroup({ condition: typeId });
        for (let j = 0; j < data.length; j++) {
          if (typeId === 11) {
            switch (data[j].value) {
              case 1:
                data[j].text = this.$t(
                  "user.verification-code.required111566133"
                );
                break;
              case 2:
                data[j].text = this.$t(
                  "user.verification-code.required111566144"
                );
                break;
              case 3:
                data[j].text = this.$t(
                  "user.verification-code.required111566145"
                );
                break;
              case 4:
                data[j].text = this.$t(
                  "user.verification-code.required111566146"
                );
                break;
              case 5:
                data[j].text = `${this.$t(
                  "user.verification-code.required11156611057737144228143122233556655"
                )}/${this.$t("user.verification-code.required111566122")}`;
                break;
              default:
                break;
            }
          } else {
            data[j].text = data[j].value;
          }
        }
        this.columns[typeId - 1].filters = data;
        this.filterData = data;
        console.log("data---------------", data);
        console.log("listData", this.listData);
      } catch (error) {
        // 报错信息
        this.$message.error(error);
        console.log(error);
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false;
      }
    },
    async init() {
      //获取用户信息
      const { data } = await getUserInfo();
      this.userroleid = data.role;
      this.pagination.page = 1;
      await this.getList();
      console.log(localStorage.getItem("lang"));
      console.log(typeof localStorage.getItem("lang"));
      if (localStorage.getItem("lang") == '"zh-CN"') {
        this.itLang = true;
      } else if (localStorage.getItem("lang") == '"zh-EN"') {
        this.itLang = false;
      }
      console.log("this.itLang", this.itLang);
    },
    async mate() {
      var tempLists = [];
      this.importDiResult = [];
      // 开始匹配数据
      for (var i = 0; i < this.dccDiData.length; i++) {
        // 发起查询匹配
        const { data } = await discoverFinds({
          Items: this.dccDiData[i].Items1,
          Classification: this.dccDiData[i].Classification,
        });
        // 判断返回结果
        if (data.Result != "未匹配") {
          this.dccDiData[i].Result = data.Info;
          this.dccDiData[i].Rid = data.Id;
          this.importDiResult.push(this.dccDiData[i]);
        } else {
          this.dccDiData[i].Result = data.Result;
          this.dccDiData[i].Rid = 0;
        }
        tempLists.push(this.dccDiData[i]);
      }
      this.dccDiData = tempLists;
    },
    async handleChangeDiAppid(value, index) {
      // 根据APPID查数据发现的字段
      const { data } = await discoverTree({ DiscoverAppId: index.key });
      this.treeData = data.treeData;
      this.checkedKeys = data.ids;
    },
    search() {
      this.pagination.page = 1;
      this.getList();
    },
    async init() {
      // 获取APPID下拉数据
      const { data: appidLists } = await appIdCreatexl();
      // 加载数据控制者数据
      const { data: systemControllerSourceData } = await configurationSelect({
        state: 11,
      });
      // 城市
      const { data: sonfigurationItemsContent } = await appidSxq({ state: 3 });
      // 存放地
      const { data: fonfigurationItemsContent } = await appidSxq({ state: 4 });
      // 分类分级数据
      const { data: dccSelectData } = await dccSelect();

      // 获取用户列表下拉
      const { data: userList } = await userQuery(1);

      this.userList = userList;

      this.dccSelectData = dccSelectData;
      this.appidLists = appidLists;
      this.systemControllerSourceData = systemControllerSourceData;
      this.sonfigurationItemsContent = sonfigurationItemsContent;
      this.fonfigurationItemsContent = fonfigurationItemsContent;

      this.getList();
    },
    async submitSave() {
      // 保存草稿
      const {
        form: { validateFields },
      } = this;
      // 按钮loading
      this.loading = true;
      validateFields({ force: false }, async (err, values) => {
        if (!err) {
          try {
            if (this.dataDetailInfoTables.length < 1) {
              this.$message.error(
                this.$t("user.verification-code.required111566110577342")
              );
              return;
            }
            values.DataLibraryController =
              values.DataLibraryController.join(",");
            values["Details"] = this.dataDetailInfoTables;
            values["DataLibraryState"] = 2;

            var tempLists = [];
            for (var i = 0; i < this.dataDetailInfoTables.length; i++) {
              if (
                !this.dataDetailInfoTables[i].DataCity ||
                this.dataDetailInfoTables[i].DataCity.length == 0
              ) {
                this.$message.error(this.$t("menu.account.logout1122992244"));
                return;
              }
              if (
                !this.dataDetailInfoTables[i].DataDeposit ||
                this.dataDetailInfoTables[i].DataDeposit.length == 0
              ) {
                this.$message.error(this.$t("menu.account.logout1122992255"));
                return;
              }
              if (
                !this.dataDetailInfoTables[i].DataSource ||
                this.dataDetailInfoTables[i].DataSource.length == 0
              ) {
                this.$message.error(this.$t("menu.account.logout1122992266"));
                return;
              }
              if (
                !this.dataDetailInfoTables[i].DataDestination ||
                this.dataDetailInfoTables[i].DataDestination.length == 0
              ) {
                this.$message.error(this.$t("menu.account.logout1122992277"));
                return;
              }
            }
            for (var i = 0; i < this.dataDetailInfoTables.length; i++) {
              this.dataDetailInfoTables[i].DataCity =
                this.dataDetailInfoTables[i].DataCity.join(",");
              this.dataDetailInfoTables[i].DataDeposit =
                this.dataDetailInfoTables[i].DataDeposit.join(",");
              this.dataDetailInfoTables[i].DataSource =
                this.dataDetailInfoTables[i].DataSource.join(",");
              this.dataDetailInfoTables[i].DataDestination =
                this.dataDetailInfoTables[i].DataDestination.join(",");
              tempLists.push(this.dataDetailInfoTables[i]);
            }

            values["Details"] = tempLists;
            values["DataLibraryState"] = 1;
            if (values.Id != undefined) {
              const { data } = await dataLibraryChange({ ...values });
            } else {
              const { data } = await dataLibraryCreate({ ...values });
            }
          } catch (error) {
            console.error(error);
            this.$message.error(error);
          } finally {
            this.loading = false;
          }
          this.dataDetailInfoTables = [];
          this.modalVisible = false;
          this.getList();
        } else {
          setTimeout(() => {
            this.loading = false;
          }, 600);
        }
      });
    },
    async submitCreate() {
      // 提交新建
      const {
        form: { validateFields },
      } = this;
      // 按钮loading
      this.loading = true;
      validateFields({ force: true }, async (err, values) => {
        if (!err) {
          try {
            if (this.dataDetailInfoTables.length < 1) {
              this.$message.error(
                this.$t("user.verification-code.required111566110577342")
              );
              return;
            }
            values.DataLibraryEnvironment = parseInt(
              values.DataLibraryEnvironment
            );
            values["Details"] = this.dataDetailInfoTables;

            values.DataLibraryController =
              values.DataLibraryController.join(",");
            values["DataLibraryState"] = 2;

            var tempLists = [];
            for (var i = 0; i < this.dataDetailInfoTables.length; i++) {
              console.log(this.dataDetailInfoTables[i].DataCity);
              if (
                !this.dataDetailInfoTables[i].DataCity ||
                this.dataDetailInfoTables[i].DataCity.length == 0
              ) {
                this.$message.error(this.$t("menu.account.logout1122992244"));
                return;
              }
              if (
                !this.dataDetailInfoTables[i].DataDeposit ||
                this.dataDetailInfoTables[i].DataDeposit.length == 0
              ) {
                this.$message.error(this.$t("menu.account.logout1122992255"));

                return;
              }
              if (
                !this.dataDetailInfoTables[i].DataSource ||
                this.dataDetailInfoTables[i].DataSource.length == 0
              ) {
                console.log(this.dataDetailInfoTables[i].DataSource);
                this.$message.error(this.$t("menu.account.logout1122992266"));

                return;
              }
              if (
                !this.dataDetailInfoTables[i].DataDestination ||
                this.dataDetailInfoTables[i].DataDestination.length == 0
              ) {
                this.$message.error(this.$t("menu.account.logout1122992277"));

                return;
              }
            }
            for (var i = 0; i < this.dataDetailInfoTables.length; i++) {
              this.dataDetailInfoTables[i].DataCity =
                this.dataDetailInfoTables[i].DataCity.join(",");
              this.dataDetailInfoTables[i].DataDeposit =
                this.dataDetailInfoTables[i].DataDeposit.join(",");
              this.dataDetailInfoTables[i].DataSource =
                this.dataDetailInfoTables[i].DataSource.join(",");
              this.dataDetailInfoTables[i].DataDestination =
                this.dataDetailInfoTables[i].DataDestination.join(",");

              tempLists.push(this.dataDetailInfoTables[i]);
            }
            values["Details"] = tempLists;

            if (values.Id != undefined) {
              const { data } = await dataLibraryChange({ ...values });
            } else {
              const { data } = await dataLibraryCreate({ ...values });
            }
            this.$message.success(
              this.$t("user.verification-code.required111566171")
            );
          } catch (error) {
            this.$message.error(error);
            console.log(error);
          } finally {
            this.loading = false;
          }
          this.dataDetailInfoTables = [];
          this.modalVisible = false;
          this.getList();
        } else {
          setTimeout(() => {
            this.loading = false;
          }, 600);
        }
      });
    },
    async handleChangeAppid(value, index) {
      const { data } = await appIdDetail({ id: index.key });
      this.form.setFieldsValue({
        AppidName: data.AppName,
        AppOwner: data.AppOwner,
        AppDepartment: data.AppDepartment,
        BbaAppId: data.BbaAppId,
        BmwAppId: data.BmwAppId,
        FeatherId: data.FeatherId,
      });
    },
    // 分页事件 直接复制使用 通用的
    tableChange(e, searchInputs) {
      let parames = Object.keys(searchInputs);
      for (var i = 0; i < parames.length; i++) {
        searchInputs[parames[i]] = searchInputs[parames[i]].join();
      }
      this.queryForm = { ...searchInputs };
      this.getList("filter");
    },
    // 获取列表
    async getList(state) {
      this.listLoading = true;
      const { page, pageSize } = this.pagination;
      try {
        if (state == "filter") {
          // 调用查询列表
          const { data } = await dataLibraryLists({
            ...{ page: 1, pageSize: 10 },
            ...this.queryForm,
          });
          console.log(data);
          // 解构赋值
          const { Page, PageSize, Total, Lists } = data;
          // 给table赋值
          this.tableListData = Lists || [];
          // 给分页数据赋值
          this.pagination = {
            page: Page,
            pageSize: PageSize,
            total: Total,
          };
        } else {
          // 调用查询列表
          const { data } = await dataLibraryLists({
            ...{ page, pageSize },
            ...this.queryForm,
          });
          // 解构赋值
          const { Page, PageSize, Total, Lists } = data;
          // 给table赋值
          this.tableListData = Lists || [];
          // 给分页数据赋值
          this.pagination = {
            page: Page,
            pageSize: PageSize,
            total: Total,
          };
        }
      } catch (error) {
        console.error(error);
        // 报错信息
        this.$message.error(error);
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false;
      }
    },
    // 重置
    restQuery() {
      this.queryForm = {
        name: undefined,
        appid: undefined,
        assetsId: undefined,
        department: undefined,
        owner: undefined,
        controller: undefined,
        entities: undefined,
        environment: undefined,
        state: undefined,
        rpaid: undefined,
      };
      this.getList();
    },
    async showModal(state, id) {
      // 数据清空
      this.form.resetFields();
      this.modalVisible = true;
      if (state == "detail") {
        this.see = true;
      }
      if (state == "edit" || state == "detail") {
        // 查基础数据DataLibraryEnvironment
        // this.otherflag=true;
        this.delid = id;
        const { data: dataInfo } = await dataLibraryDetail({ Id: this.delid });
        if (dataInfo.DataLibraryControllerOther != "") {
          this.otherflag = true;
        } else {
          this.otherflag = false;
        }
        let arr3 = [];
        if (dataInfo.DataLibraryController == "") {
          arr3 = undefined;
        } else {
          let arr1 = dataInfo.DataLibraryController.split(",");
          arr1.forEach((item) => {
            arr3.push(parseInt(item));
          });
        }

        await this.$nextTick();
        this.form.setFieldsValue({
          DataLibraryAppidId: dataInfo.DataLibraryAppidId,
          DataLibraryCreateTime: dataInfo.DataLibraryCreatetime,
          DataLibraryUpdateTime: dataInfo.DataLibraryUpdatetime,
          DataLibraryController: arr3,
          DataLibraryControllerOther: dataInfo.DataLibraryControllerOther,
          DataLibraryEnvironment: dataInfo.DataLibraryEnvironment,
          DataLibraryEntities: dataInfo.DataLibraryEntities,
          DataAssetsId: dataInfo.DataAssetsId,
          DataLibraryUser: dataInfo.DataLibraryUser,
          Id: dataInfo.Id,
          BmwAppId: dataInfo.BmwAppId,
          BbaAppId: dataInfo.BbaAppId,
          FeatherId: dataInfo.FeatherId,
        });

        this.handleChangeAppid("", { key: dataInfo.DataLibraryAppidId });

        let tempLists = [];
        await this.$nextTick();
        if (dataInfo.Details) {
          for (var i = 0; i < dataInfo.Details.length; i++) {
            var arr5 = [];
            dataInfo.Details[i].DataCity.split(",").forEach((item) => {
              if (item != "NaN" && item) {
                arr5.push(parseInt(item));
              }
            });
            var arr6 = [];
            dataInfo.Details[i].DataDeposit.split(",").forEach((item) => {
              if (item != "NaN" && item) {
                arr6.push(parseInt(item));
              }
            });
            var arr7 = [];
            dataInfo.Details[i].DataSource.split(",").forEach((item) => {
              if (item != "NaN" && item) {
                arr7.push(parseInt(item));
              }
            });
            var arr8 = [];
            dataInfo.Details[i].DataDestination.split(",").forEach((item) => {
              if (item != "NaN" && item) {
                arr8.push(parseInt(item));
              }
            });
            var tempItems = {
              Id: dataInfo.Details[i].Id,
              key: dataInfo.Details[i].Id,
              DataItemStr: dataInfo.Details[i].DataItemsStr,
              DataItem: dataInfo.Details[i].DataItem,
              DataLevelStr: dataInfo.Details[i].DataLevelStr,
              DataLevel: dataInfo.Details[i].SourceDataLevel, // 数据级别
              DataSensitiveStr: dataInfo.Details[i].DataSensitivityStr, // 数据敏感度
              DataSensitive: dataInfo.Details[i].SourceDataSensitive,
              DataCity: arr5,
              DataDeposit: arr6,
              DataSource: arr7,
              DataDestination: arr8,
            };
            tempLists.push(tempItems);
          }
        }
        this.dataDetailInfoTables = tempLists;
      }

      if (state == "edit") {
        this.modalTitle = this.$t("user.verification-code.required1115667777");
      } else if (state == "add") {
        this.modalTitle = this.$t("user.verification-code.required1115667766");
      } else if (state == "detail") {
        this.modalTitle = this.$t("user.verification-code.required1115667788");
      }
    },
    //删除数据项
    async deletes(record) {
      try {
        const { data: dataInfo } = await dataLibraryDelete({ Id: record.Id });
        this.dataDetailInfoTables.splice(
          this.dataDetailInfoTables.indexOf(record),
          1
        );
        this.$message.success(
          this.$t("user.verification-code.required111566110577133")
        );
      } catch (error) {
        // 报错信息
        this.$message.error(error);
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false;
      }
    },
    // 关闭抽屉
    closeDrawer() {
      this.otherflag = false;
      this.see = false;
      this.loading = false;
      this.dataDetailInfoTables = [];
      this.addAppForm = {};
      this.modalVisible = false;
    },
    // 打开弹窗
    openModal() {
      this.diForm.resetFields();
      this.visible = true;
    },
    handleCancel(e) {
      this.treeData = [];
      this.dccDiData = [];
      this.current = 0;
      this.importDiResult = [];
      // 取消关闭抽屉
      this.visible = false;
    },
    next() {
      // 保存草稿
      const {
        diForm: { validateFields },
      } = this;
      // 按钮loading
      this.loading = true;
      validateFields({ force: false }, async (err, values) => {
        if (!err) {
          let res = []; // 用于存储递归结果（扁平数据）
          // 递归函数
          let fn = (source) => {
            source.forEach((el) => {
              res.push(el);
              el.children && el.children.length > 0 ? fn(el.children) : ""; // 子级递归
            });
          };
          fn(this.treeData);
          console.log("res", res);
          // 将结果数据插入到列表中
          this.dccDiData = [];
          for (var i = 0; i < res.length; i++) {
            var dataImport = {};
            if (this.checkedKeys.indexOf(res[i].key) != -1) {
              dataImport["Id"] = res[i].key;
              const data = res[i].title.split("/");
              console.log(data);
              if (data.length > 1) {
                // 0为前，1为备注
                dataImport["Items"] = data[1];
                dataImport["Items1"] = data[1];
              } else {
                dataImport["Items"] = data[0];
                dataImport["Items1"] = data[0];
              }
              // dataImport["Items"] = res[i].title.split('/')
              // console.log(res[i].title.split('/'));

              this.dccDiData.push(dataImport);
              console.log(this.dccDiData);
            }
          }
          this.current++;
        } else {
          setTimeout(() => {}, 600);
        }
      });
    },
    prev() {
      this.current--;
    },
    showEye(data) {
      this.detailTitle =
        data.DataAssetsId +
        this.$t("user.verification-code.required111566110577145");
      this.eyeDrawerList = [];
      this.eyeDrawerList = data.details;
      this.eyeDrawer = true;
    },
    closeEyeDrawer() {
      this.eyeDrawer = false;
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.card {
  display: flex;
  align-items: center;
  border-radius: 8px;
  box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
  padding: 20px;
  padding-right: 150px;

  h4 {
    font-size: 30px;
  }

  p {
    font-size: 16px;
    color: #999;
  }
}

/deep/ .drawer-form {
  margin-bottom: 40px;

  // .ant-form-item {
  // margin-right: 50px;
  // }

  .ant-form-item-label {
    display: inline-block;
    line-height: 40px;
    width: 100px;
    margin-right: 10px;
  }
}

.find-button {
  float: left;
  margin-top: -50px;
  margin-left: 100px;
}

.ant-pagination {
  float: right;
}

.ty {
  width: 13px;
  height: 13px;
  opacity: 1;
  background: rgba(255, 255, 255, 1);
  border: 4px solid #5076a5;
  border-radius: 50%;
}

.fa {
  position: relative;
}

.ant-dropdown-link {
  color: #5076a5;
}

.appids {
  margin-left: 90px;
}

/deep/ .ant-form-item-label {
  overflow: visible !important;
}
</style>